

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise 和 XHR获取省份列表</title>
</head>
<body>
    <p class="city">

    </p>

    <script>

        /**
         * 1;创建Promise对象
         * 2：执行XHR异步代码 获取省份列表数据
         * 3：关联成功或失败函数
         */


        const p = new Promise((resolve,reject)=>{
             // 创建对象
             const  xhr = new XMLHttpRequest()
     
             xhr.open("get","http://hmajax.itheima.net/api/city?pname=河南省")
     
             xhr.addEventListener("loadend",function () {
                // xhr如何判断响应成功还是失败的？
                // 2xx开头的都是成功响应状态码
                if (xhr.status>=200 && xhr.status < 300) {
                    resolve(JSON.parse(xhr.response))
                } else {
                    reject(new Error(xhr.response))
                }
                    
            })

            xhr.send()
            
        })

        p.then(res=>{
            console.log(res);           
            document.querySelector('.city').innerHTML = res.list.join("<br />")

        }).catch(err=>{
            // 详细打印
            console.dir(err)
            document.querySelector('.city').innerHTML = err.message;
        })
        
    </script>

</body>
</html>